AngularJS Directives

AngularJS புதிய பண்புக்கூறுகளுடன் HTML ஐ விரிவுபடுத்த உங்களை அனுமதிக்கிறது, அவை Directives என்று அழைக்கப்படுகின்றன.

AngularJS உங்கள் பயன்பாடுகளுக்கு செயல்பாட்டினை வழங்கும் உள்ளமைக்கப்பட்ட directives தொகுப்பைக் கொண்டுள்ளது.

AngularJS உங்கள் சொந்த directives வரையறுக்கவும் அனுமதிக்கிறது.

AngularJS Directives அடிப்படைகள்

AngularJS directives என்பது ng- முன்னொட்டுடன் கூடிய விரிவாக்கப்பட்ட HTML பண்புக்கூறுகள் ஆகும்.

ng-app

ஒரு AngularJS பயன்பாட்டை துவக்குகிறது

ng-init

பயன்பாட்டு தரவை துவக்குகிறது

ng-model

HTML கட்டுப்பாடுகளின் மதிப்பை பயன்பாட்டு தரவுடன் இணைக்கிறது

எங்கள் AngularJS directive குறிப்பில் அனைத்து AngularJS directives பற்றியும் படிக்கவும்.

உதாரணம்

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

ng-app directive AngularJS க்கு <div> உறுப்பு AngularJS பயன்பாட்டின் "உரிமையாளர்" என்றும் கூறுகிறது.

தரவு இணைப்பு

மேலே உள்ள உதாரணத்தில் உள்ள {{ firstName }} எக்ஸ்பிரஷன், ஒரு AngularJS தரவு இணைப்பு எக்ஸ்பிரஷன் ஆகும்.

AngularJS இல் தரவு இணைப்பு AngularJS எக்ஸ்பிரஷன்களை AngularJS தரவுடன் இணைக்கிறது.

{{ firstName }} என்பது ng-model="firstName" உடன் இணைக்கப்பட்டுள்ளது.

இரு உரை புலங்கள் இணைக்கப்பட்ட உதாரணம்:

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

குறிப்பு:

ng-init பயன்படுத்துவது மிகவும் பொதுவானது அல்ல. கட்டுப்பாட்டாளர்கள் பற்றிய அத்தியாயத்தில் தரவை எவ்வாறு துவக்குவது என்பதை நீங்கள் கற்றுக்கொள்வீர்கள்.

HTML உறுப்புகளை மீண்டும் செய்தல்

ng-repeat directive ஒரு HTML உறுப்பை மீண்டும் செய்கிறது:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

ng-repeat directive ஒரு தொகுப்பில் உள்ள ஒவ்வொரு உருப்படிக்கும் HTML உறுப்புகளை உண்மையில் நகலெடுக்கிறது.

பொருள்களின் வரிசையில் ng-repeat directive பயன்படுத்தப்பட்டது:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

தரவுத்தள பயன்பாடுகள்:

AngularJS தரவுத்தள CRUD (Create Read Update Delete) பயன்பாடுகளுக்கு சிறந்தது. இந்த பொருள்கள் ஒரு தரவுத்தளத்திலிருந்து பதிவுகளாக இருந்தால் கற்பனை செய்து பாருங்கள்.

ng-app Directive

ng-app directive ஒரு AngularJS பயன்பாட்டின் ரூட் உறுப்பை வரையறுக்கிறது.

ஒரு வலைப்பக்கம் ஏற்றப்பட்டதும், ng-app directive தானாகவே பயன்பாட்டை துவக்கும் (தானியங்கி துவக்கம்).

ng-init Directive

ng-init directive ஒரு AngularJS பயன்பாட்டிற்கான ஆரம்ப மதிப்புகளை வரையறுக்கிறது.

பொதுவாக, நீங்கள் ng-init ஐப் பயன்படுத்த மாட்டீர்கள்.

அதற்கு பதிலாக நீங்கள் ஒரு கட்டுப்பாட்டாளர் அல்லது தொகுதியைப் பயன்படுத்துவீர்கள்.

கட்டுப்பாட்டாளர்கள் மற்றும் தொகுதிகள் பற்றி பின்னர் நீங்கள் மேலும் அறிந்து கொள்வீர்கள்.

ng-model Directive

ng-model directive HTML கட்டுப்பாடுகளின் (input, select, textarea) மதிப்பை பயன்பாட்டு தரவுடன் இணைக்கிறது.

ng-model directive மேலும் செய்ய முடியும்:

பயன்பாட்டு தரவுக்கான வகை சரிபார்ப்பை வழங்குதல் (number, email, required)
பயன்பாட்டு தரவுக்கான நிலையை வழங்குதல் (invalid, dirty, touched, error)
HTML உறுப்புகளுக்கான CSS வகுப்புகளை வழங்குதல்
HTML உறுப்புகளை HTML படிவங்களுடன் இணைத்தல்

அடுத்தது:

அடுத்த அத்தியாயத்தில் ng-model directive பற்றி மேலும் படிக்கவும்.

புதிய Directives உருவாக்குதல்

அனைத்து உள்ளமைக்கப்பட்ட AngularJS directives க்கும் கூடுதலாக, நீங்கள் உங்கள் சொந்த directives உருவாக்கலாம்.

.directive செயல்பாடு பயன்படுத்தி புதிய directives உருவாக்கப்படுகின்றன.

புதிய directive ஐ அழைக்க, புதிய directive போன்ற அதே குறிச்சொல் பெயருடன் ஒரு HTML உறுப்பை உருவாக்கவும்.

ஒரு directive க்கு பெயரிடும்போது, நீங்கள் ஒரு cameCase பெயரைப் பயன்படுத்த வேண்டும், jassifTestDirective, ஆனால் அதை அழைக்கும் போது, நீங்கள் - பிரிக்கப்பட்ட பெயரைப் பயன்படுத்த வேண்டும், jassif-test-directive:

<body ng-app="myApp">

<jassif-test-directive></jassif-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("jassifTestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  };
});
</script>

</body>

Directive அழைப்பு முறைகள்

நீங்கள் ஒரு directive ஐப் பயன்படுத்தி அழைக்கலாம்:

உறுப்பு பெயர்

<jassif-test-directive>
</jassif-test-directive>

பண்புக்கூறு

<div jassif-test-directive>
</div>

வகுப்பு

<div class="jassif-test-directive">
</div>

கருத்து

<!-- directive: jassif-test-directive -->

மேலே உள்ள எடுத்துக்காட்டுகள் அனைத்தும் ஒரே முடிவைத் தரும்.

கட்டுப்பாடுகள்

சில முறைகளால் மட்டுமே உங்கள் directives அழைக்கப்படுவதை நீங்கள் கட்டுப்படுத்தலாம்.

உதாரணம்

"A" மதிப்புடன் ஒரு restrict பண்புக்கூறைச் சேர்ப்பதன் மூலம், directive பண்புக்கூறுகளால் மட்டுமே அழைக்கப்படும்:

var app = angular.module("myApp", []);
app.directive("jassifTestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  };
});

மதிப்பு	பொருள்	விளக்கம்
E	உறுப்பு பெயர்	Element name
A	பண்புக்கூறு	Attribute
C	வகுப்பு	Class
M	கருத்து	Comment

இயல்புநிலையாக மதிப்பு EA ஆகும், அதாவது உறுப்பு பெயர்கள் மற்றும் பண்புக்கூறு பெயர்கள் இரண்டும் directive ஐ அழைக்க முடியும்.

பின்வருவனவற்றில் எது சரியான custom directive வரையறை?

app.directive("test-directive", function() {})

✗ தவறு! Directive பெயர் cameCase இல் இருக்க வேண்டும்

app.directive("testDirective", function() {})

✓ சரி! Directive பெயர் cameCase இல் உள்ளது

app.createDirective("testDirective", function() {})

✗ தவறு! .directive() முறையைப் பயன்படுத்தவும்

app.newDirective("test_directive", function() {})

✗ தவறு! சரியான முறை .directive() ஆகும்

முந்தைய அடுத்தது